<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我发起的投票</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/vote.js"></script>
</head>
<body>
<div id="app">

  <vote >
    <div id="vote" class="wrap">
      <h2>投票列表</h2>
      <ul class="list">


        <li v-for="(vote,i) in votes" :class="i%2==0 ? 'odd' : '' ">
          <h4>
            <a :href="'view.html?id=' + vote.id">{{vote.vname}}</a>
          </h4>
          <div class="join"><a :href="'vote.html?id=' + vote.id">我要参与</a></div>
          <p class="info">共有 {{vote.items.length}} 个选项，已有 {{vote.unum}} 个网友参与了投票。</p>
        </li>


      </ul>
      <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="size"
              @current-change="pageQuery">
      </el-pagination>
    </div>
  </vote>

</div>

<script>


  var v = new Vue({
    el : "#app",
    data : {
      votes:[],
      total:0,
      page:1,
      size:5
    },
    created() {
      this.query("");
    },
    methods : {
      query(keywords) {
        /* /^\s*$/.test() 是在JavaScript中使用正则表达式来检测一个字符串是否只包含空格，或者是一个空字符串。
    ^ 表示字符串的开始
    $ 表示字符串的结束
    \s* 表示零个或多个空白字符（包括空格、制表符、换页符等）*/

        if (/^\s*$/.test(keywords) ){
          keywords = "";
        }

        axios.get("vote/vote/query?vname=" + keywords + "&page=" + this.page + "&size=" + this.size + "&usid=" + location.search.substring("?usid=".length)).then(res =>{
          this.votes = res.data.rows;
          this.total = res.data.total;
        })

      },
      pageQuery(page){
        this.page = page;
        this.query("");
      }
    }
  })
</script>
</body>
</html>